<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东北药用植物种质资源保存信息网</title>
    <link rel="shortcut icon " href="js/plant.png" >
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/vue.js"></script>
    <link href="js/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1" class="table table-bordered table-hover">
        <tr v-if="plantList.length!=0" style="text-align: center">
            <td>资源名称</td>
            <td>资源编号</td>
            <td>图片</td>
        </tr>
        <tr  v-for="plant in plantList" style="text-align: center">
            <td @click="next(plant.resourceNumber)">{{plant.germplasmName}}</td>
            <td @click="next(plant.resourceNumber)">{{plant.resourceNumber}}</td>
            <td @click="next(plant.resourceNumber)">
                <img v-bind:src="plant.ophoto" width="100px" height="100px" class="img-rounded"
                     v-if="plant.ophoto!=null">
                <img v-bind:src="plant.tphoto" width="100px" height="100px" class="img-rounded"
                     v-if="plant.tphoto!=null">
                <img v-bind:src="plant.fphoto" width="100px" height="100px" class="img-rounded"
                     v-if="plant.fphoto!=null">
            </td>
            <td style="width: 100px">
                图片(最多三张)：<input id="img" type="file" multiple="multiple" @change="imageResolving($event)"/>
                <button type="button" class="btn btn-success btn-sm"
                        @click="fileUpload(plant.germplasmName,plant.resourceNumber)">提交
                </button>
            </td>
        </tr>
    </table>
</div>

</body>
<script type="text/javascript">
    var result;

    function oneValues() {
        var url = window.location.search;
        if (url.indexOf("?") != -1) {
            result = decodeURI(url.substr(url.indexOf("=") + 1));
        }
    }

    const x = new Vue({
        el: '#app',
        data: {
            plantList: [],
            imageList: []
        },
        methods: {
            queryList() {
                axios.get("http://8.130.8.204:8080/plant/import/querybyspecies", {params: {species: result}}).then(res => {
                    this.plantList = res.data
                })
            },
            fileUpload(germplasmName, resourceNumber, index) {
                let param = new FormData()
                param.append("germplasmName", germplasmName);
                param.append("resourceNumber", resourceNumber);
                if (this.imageList.length > 0) {
                    for (let index = 0; index < this.imageList.length; index++) {
                        const element = this.imageList[index];
                        param.append("imageList", element);
                    }
                }
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }
                axios.post('http://8.130.8.204:8080/plant/import/uploadPhotos', param, config)
                    .then(res => {
                        if (res.data === 'ok') {
                            alert("上传成功")
                        } else if (res.data === 'no') {
                            alert("上传失败")
                        } else if (res.data === 'empty') {
                            alert("请选择图片")
                        }

                        location.reload()
                    })
            },
            next(resourceNumber) {
                window.location.href = "show1.html?resourceNumber=" + resourceNumber
            },
            imageResolving(e) {
                if (e.target.files.length > 3) {
                    alert("上传失败，一次最多上传3张")
                    return
                }
                this.imageList = e.target.files
            }
        },
        created() {
            oneValues()
            this.queryList()
        }


    })


</script>
</html>